<script lang="ts" setup>
import { getPatientMedicineOrderMylistAPI } from '@/apis/medicine'
import type { GetPatientMedicineOrderMylistParams, MedicineOrderDetail } from '@/types/medicine'
import { ref } from 'vue'

// 接收父组件传递的参数
const props = defineProps<{
  status: string
}>()

// 定义查询参数
const query = ref<Required<GetPatientMedicineOrderMylistParams>>({
  status: props.status, // 问诊类型
  current: 1, // 页码
  pageSize: 10, // 页大小
})

// 获取订单列表
const list = ref<MedicineOrderDetail[]>([])
// 总条数
const total = ref(0)
// 总页数
const pageTotal = ref(0)
// 加载状态
const loadMoreStatus = ref<UniHelper.UniLoadMoreStatus>('loading')

// 获取订单列表
const getList = async (isMore = false) => {
  // 加载状态 - 加载中
  loadMoreStatus.value = 'loading'
  // 发送请求
  const res = await getPatientMedicineOrderMylistAPI(query.value)

  // 如果是加载更多，则追加数据
  if (isMore) {
    list.value.push(...res.data.rows)
  } else {
    list.value = res.data.rows
  }

  total.value = res.data.total // 总条数
  pageTotal.value = res.data.pageTotal // 总页数

  // 判断是否还有更多数据
  if (query.value.current < pageTotal.value) {
    loadMoreStatus.value = 'more'
  } else {
    loadMoreStatus.value = 'noMore'
  }
}

// 加载更多数据
const getMoreData = async () => {
  // 如果当前页已经是最后一页，则不再加载
  if (query.value.current >= pageTotal.value) return
  // 页码加1
  query.value.current++
  // 加载更多数据
  await getList(true)
}

// 初始加载
getList()

// 下拉刷新状态
const refresherTriggered = ref(false)
// 下拉刷新事件
const onRefresh = async () => {
  // 开启下拉刷新状态
  refresherTriggered.value = true
  // 重置页码
  query.value.current = 1
  // 重新加载数据
  await getList()
  // 关闭下拉刷新状态
  refresherTriggered.value = false
}
</script>

<template>
  <scroll-view
    refresher-enabled
    refresher-background="#f6f6f6"
    class="uni-scroll-view"
    scroll-y
    :refresher-triggered="refresherTriggered"
    @scrolltolower="getMoreData"
    @refresherrefresh="onRefresh"
  >
    <view class="order-list">
      <view class="order-list-item" v-for="item in list" :key="item.id">
        <view class="order-header">
          <text class="number">订单编号: {{ item.orderNo }}</text>
          <text class="status">{{ item.statusValue }}</text>
        </view>
        <navigator
          :url="`/subpkg_medicine/pages/order_detail/order_detail?orderId=${item.id}`"
          hover-class="none"
          class="order-body"
        >
          <view class="medicine" v-for="medicine in item.medicines" :key="medicine.id">
            <image class="medicine-cover" :src="medicine.avatar" mode="aspectFill" />
            <view class="medicine-info">
              <text class="name">{{ medicine.name }}</text>
              <text class="unit symbol">{{ medicine.specs }}</text>
              <text class="price">¥{{ medicine.amount }}</text>
            </view>
            <view class="quantity">x{{ medicine.quantity }}</view>
          </view>
        </navigator>
        <view class="order-footer">
          <view class="total">
            <text> 共 {{ item.medicines?.length }} 件商品</text>
            <text>合计：¥{{ item.actualPayment }}（运费¥{{ item.expressFee }}）</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消订单</button>
            <button class="uni-button">继续支付</button>
          </view>
        </view>
      </view>
      <!-- 加载状态 -->
      <uni-load-more
        :status="loadMoreStatus"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
.uni-scroll-view {
  flex: 1;
  overflow: hidden;
  padding-top: 15rpx;
}

.order-list {
  padding: 15rpx 30rpx 30rpx;
}

.order-list-item {
  // height: 715rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    padding: 0 30rpx;
    margin: 0 -30rpx;
    font-size: 26rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .number {
      color: #848484;
    }

    .status {
      color: #f2994a;
    }
  }

  .medicine {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    position: relative;

    .medicine-cover {
      width: 180rpx;
      height: 160rpx;
      float: left;
    }

    .medicine-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
      padding-left: 20rpx;

      .name {
        font-size: 30rpx;
        font-weight: 500;
        color: #121826;
      }

      .unit {
        color: #979797;
        font-size: 28rpx;
        display: flex;
        align-items: center;

        @include text-overflow(1);

        &.symbol::before {
          content: '处方药';
          line-height: 1;
          padding: 8rpx 10rpx;
          margin-right: 10rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
          color: #fff;
          background-color: #16c2a3;
        }
      }

      .price {
        color: #eb5757;
        font-size: 32rpx;
      }
    }

    .quantity {
      top: 30rpx;
      right: 0;
      position: absolute;

      font-size: 30rpx;
      color: #121826;
    }
  }

  .order-footer {
    padding: 30rpx 0;

    .total {
      text-align: right;
      font-size: 24rpx;
      color: #3c3e42;
    }

    .buttons {
      display: flex;
      justify-content: flex-end;
      padding-top: 20rpx;
    }

    .uni-button {
      height: 60rpx;
      line-height: 60rpx;
      margin: 20rpx 0 0 30rpx;
      font-size: 26rpx;
      color: #16c2a3;
      border: 1rpx solid #16c2a3;
      background-color: #fff;

      &.minor {
        color: #3c3e42;
        border-color: #ededed;
        background-color: #f6f6f6;
      }
    }
  }
}
</style>
